<template>
  <div class="app">
    <!-- 首页 -->
    <div v-if="show" class="page-box">

      <!-- 工具栏 -->
      <!-- 新增按钮 -->
      <div style="text-align: right;">
        <el-button size="small" type="primary" style="margin-bottom: 6px;" plain @click="show=false">创建考试</el-button>
      </div>

      <!-- 工具栏表单部分 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="考试名称" style="margin-right: 120px; margin-bottom: 13px;">
          <el-input v-model="form.exam_name" placeholder="考试名称" size="small" style="width: 215px;" />
        </el-form-item>
        <!-- 学科名称下拉框 -->
        <el-form-item label="学科名称" style="margin-right: 120px; margin-bottom: 13px;">
          <el-select v-model="form.subject_id" clearable placeholder="归属学科" size="small" style="width: 215px;" @change="subject">
            <el-option v-for="item in list2" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>

        <!-- 学科名称————归属目录 -->
        <el-form-item label="学科名称" style="margin-right: 120px; margin-bottom: 13px;">
          <el-select v-model="form.directory_id" clearable placeholder="归属目录" size="small" style="width: 215px;">
            <el-option v-for="item in list3" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="考试类型" style="margin-right: 120px; margin-bottom: 13px;">
          <el-select v-model="form.exam_type" clearable placeholder="请选择" size="small" style="width: 215px;">
            <el-option label="阶段考核" value="1" />
            <el-option label="综合考试" value="2" />
          </el-select>
        </el-form-item>

        <el-form-item label="锁屏方式" style="margin-right: 120px; margin-bottom: 13px;">
          <el-select v-model="form.lock_screen" clearable placeholder="请选择" size="small" style="width: 215px;">
            <el-option label="不锁屏" value="1" />
            <el-option label="锁屏" value="2" />
          </el-select>
        </el-form-item>

        <el-form-item label="创建人" style="margin-right: 135px; margin-bottom: 13px;">
          <el-input v-model="form.create_name" placeholder="请输入" size="small" style="width: 215px;" />
        </el-form-item>

        <el-form-item label="创建时间" style="margin-right: 270px; margin-bottom: 13px;">
          <div class="block">
            <el-date-picker
              v-model="form.created_at"
              style="width: 260px;"
              size="small"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="timestamp"
            />
          </div>
        </el-form-item>

        <el-form-item style="margin-right: 1px;">
          <el-button size="mini" type="primary" plain @click="search">搜索</el-button>
          <el-button size="mini" plain @click="reset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格部分 -->
      <!-- header-cell-style="text-align:center;" -->
      <el-table
        header-cell-style="text-align:center;"
        :data="list"
        border
        style="width: 100%;"
      >
        <el-table-column
          align="center"
          type="index"
          label="序号"
          width="60"
        />
        <el-table-column
          label="考试信息"
        >
          <template #default="{row}">
            <div>
              <span class="sss">考试ID:{{ row.id }} </span>
              <span class="sss">考试名称:<span style="color: #409eff;">{{ row.exam_name }}</span> </span>
              <span class="sss"> 归属学科:{{ row.subject_name }}</span>
              <span class="sss"> 归属目录:{{ row.directory_name }}</span>
            </div>

            <div>
              <span class="sss"> 考试类型: {{ row.exam_type===1?'阶段考核':'综合考核' }}</span>
              <span class="sss"> 考试方式:{{ row.lock_screen===1?'不锁屏':'锁屏' }} </span>
              <span class="sss"> 创建人:{{ row.create_name }}</span>
              <span class="sss">创建时间:{{ formatDate(row.created_at) }}</span>
              <span class="sss"> 试卷信息:
                <el-button
                  class="btn-mini"
                  size="mini"
                  type="primary"
                  plain
                  @click="look(row.id,row.main_paper_name, '1')"
                >点击查看</el-button>
              </span>
              <span class="sss"> 推送班级信息:
                <el-button
                  v-if="row.exam_bind_class.length>0"
                  class="look"
                  type="text"
                  size="mini"
                  @click="look(row.id,row.main_paper_name, '2',row.exam_bind_class)"
                >点击查看</el-button>
                <span v-else>暂无</span>
              </span>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="操作"
          width="180"
        >
          <template #default="{row}">
            <el-button
              type="warning"
              circle
              size="mini"
              icon="el-icon-connection"
              @click="look(row.id,row.subject_id, '3')"
            />
            <el-button
              v-if="row.exam_bind_class.length<=0"
              type="danger"
              size="mini"
              icon="el-icon-delete"
              circle
              @click="delRow(row.id)"
            />
          </template>
        </el-table-column>

      </el-table>

      <!-- 分页区域 -->
      <el-row type="flex" justify="end">
        <div class="page">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="queryParams.page"
            :page-sizes="[5,10, 14,20, 30, 40]"
            :page-size="queryParams.limit"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-row>

    </div>

    <!-- 新增按钮 子页面 -->
    <AddExam v-if="!show" :data="list2" :data1="list3" @back="show=true" @initData="initData" />

    <!-- 编辑按钮 弹框 -->
    <LookInfo
      ref="lookbox"
      :paper-big-id="paperBigId"
      :push-big-id="pushBigId"
      :paper="paper"
      :type="type"
      :class-push="classPush"
      :look-class="lookClass"
      @updateList="updateList"
      @cancelBind="cancelBind"
    />
  </div>

</template>

<script>
import { getSubject, getInfo, delExamListApi, getLookClass } from '@/api/exam/exam'
import moment from 'moment'

import AddExam from './components/addExam'
import LookInfo from './components/lookInfor'
export default {
  components: {
    AddExam,
    LookInfo
  },
  data() {
    return {
      show: true, // 控制新增页面

      list: [], // 存储表格数据
      list2: [], // 存储学科名称下拉框数据
      list3: [], // 存储归属目录下拉框数据

      queryParams: { // 分页数据
        page: 1,
        limit: 10
      },
      total: 0, // 总条数
      form: {
        exam_name: '', // 存储考试名称文本框的值
        subject_id: '', // 存储学科名称下拉框的值
        directory_id: '', // 存储归属目录下拉框的值
        exam_type: '', // 存储考试类型下拉框的值
        lock_screen: '', // 存储锁屏方式下拉框的值
        create_name: '', // 存储创建人下拉框的值
        // created_at: ''// 存储创建时间时间选择框的值
        exam_time: '' // 考试时长
      },
      paper: '', // 试卷信息
      type: '',
      lookClass: [], // 已推送班级
      classPush: [], // 链接班级
      pushBigId: 0, // 即将推送
      paperBigId: 0, // 即将推送
      time: []

    }
  },
  async created() {
    this.initData()
    // 工具栏 学科名称 下拉框渲染
    const res2 = await getSubject()
    console.log(res2)
    this.list2 = res2
  },

  methods: {
    cancelBind() {
      this.initData()
    },
    async updateList() {
      await this.initData()
    },
    // 渲染表格
    async  initData() {
      const res = await getInfo({ ...this.form, ...this.queryParams })
      console.log(res.list)
      this.list = res.list
      this.total = res.total

      // 在需要滚动到顶部的地方调用以下代码
      window.scrollTo({
        top: 0,
        behavior: 'smooth' // 使用平滑滚动效果
      })
    },
    // 点击编辑按钮执行的函数
    async look(id, paper, type, classinfo) {
      this.pushBigId = id
      this.type = type
      console.log(type)
      if (classinfo) {
        this.initData()
        this.$refs.lookbox.paperTitle = '已推送信息'
        this.$refs.lookbox.dialogVisible = true
        this.lookClass = classinfo
      } else {
        if (type === '1') {
          this.$refs.lookbox.paperTitle = '试卷信息'
          console.log(paper)
          this.paper = paper
          this.$refs.lookbox.dialogVisible = true
        } else if (type === '3') {
          this.$refs.lookbox.paperTitle = '班级列表'
          this.$refs.lookbox.dialogVisible = true
          const re = await getLookClass({
            subject_id: paper,
            state: '1'
          })
          this.classPush = re.list
          const res = this.list.filter(item => {
            return item.id === this.pushBigId
          })
          this.paperBigId = res[0].main_paper_id
        }
      }
    },
    // 删除功能
    async delRow(rowId) {
      // 弹出确认框
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 发生删除请求
        await delExamListApi(rowId)
        // 边缘问题：如果不是第一页，且这一页只有一个，且删除成功，页码需要-1
        if (this.queryParams.page > 1 && this.list.length === 1) {
          this.queryParams.page--
        }
        // 列表更新
        this.initData()

        this.$message({
          type: 'success',
          message: '删除成功!'

        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 工具栏 归属科目 子栏渲染
    subject() {
      console.log(this.form.subject_id)
      if (this.form.subject_id) {
        this.list2.forEach(item => {
          if (item.id === this.form.subject_id) { this.list3 = item.children }
        })
      }
    },
    // 搜索功能
    search() {
      this.initData()
    },
    // 重置功能
    reset() {
      this.form = {
        exam_name: '', // 存储考试名称文本框的值
        subject_id: '', // 存储学科名称下拉框的值
        directory_id: '', // 存储归属目录下拉框的值
        exam_type: '', // 存储考试类型下拉框的值
        lock_screen: '', // 存储锁屏方式下拉框的值
        create_name: '', // 存储创建人下拉框的值
        // created_at: ''// 存储创建时间时间选择框的值
        exam_time: '' // 考试时长
      }
      this.initData()
    },
    // 时间戳转时间  使用自定义的formatter函数来处理日期字段并将其转换为特定的格式。
    formatDate(row) {
      const date = moment(row) // 使用Moment.js解析日期字符串
      return date.format('YYYY-MM-DD') // 格式化日期为特定格式
    },
    // 分页器
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.queryParams.limit = val
      this.initData()
    },
    // 分页器
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.queryParams.page = val

      this.initData()
    }
  }
}

</script>
<style lang="scss" scoped>
*{
  font-size: 14px;
}

// 控制表格渲染的样式
.sss{
  margin-right: 20px;
  color: #333;
}
.btn-mini {//组件里的按钮不够小 控制按钮变小
  font-size: 8px;
  height: 20px;
  padding: 0 2px;
  line-height: 19px;

}
.btn-mini:hover,
.btn-mini:focus { //控制按钮查看 hover上去不变色
    background-color: #ecf5ff;
    border-color: #d9ecff;
    color: #409eff;
}

// 底层盒子
 .app {
      width: 88vw;
      min-height: 94vh;
      background: #eaedf1;
      padding: 20px;
    }
    .page-box {
    background-color: #fff;
    padding: 20px;
      .search-box,.tabbar-box {
        padding-top: 10px;
        border:  1px solid #eee;
        margin-bottom: 20px;
        height: 50px;
      }
  }

  // 新增弹出子页面 样式
  .add{
    background-color: #fff;
  }
  .top{
    border-bottom: 1px solid #ebeef5;
    padding: 20px 20px 10px 14px;
    width:100%;
    height: 53px;
    display: flex;
    justify-content: space-between;
  }
</style>

